import { useState } from "react";

import PageTitle from "@/components/PageTitle";

import "./index.scss";

const Typeslist = [
  {
    id: 1,
    name: "All",
  },
  {
    id: 2,
    name: "Mining",
  },
  {
    id: 3,
    name: "Task",
  },
  {
    id: 4,
    name: "Redeem",
  },
];

const listData: any[] = [];

// 模拟数据
for (let i = 1; i < 72; i++) {
  listData.push({
    id: i,
    name: "",
    value:Math.floor(Math.random()*1000)
  });
}

const HomeRecord = () => {
  const [active, setActive] = useState(1);

  const selectTab = (id: number) => {
    setActive(id);
  };

  return (
    <div className="home-record-container">
      <PageTitle />

      {/* 类别切换 */}
      <div className="tab-box">
        {Typeslist.map((item) => (
          <div
            className={active == item.id ? "item active" : "item"}
            onClick={() => {
              selectTab(item.id);
            }}
          >
            {item.name}
          </div>
        ))}
      </div>

      {/* 列表 */}
      <div className="list-box">
        <ul>
          {listData.map((item) => (
            <li key={item.id}>
                <div className="item-box">
                    <div className="left-box">
                        <div className="name">Mining income</div>
                        <div className="datetime">12/27/2024 16:40:05</div>
                    </div>
                    <div className="right-box">
                        <span className="num">+{item.value}</span>
                        <span className="unit">H/s</span>
                    </div>
                </div>
            </li>
          ))}
        </ul>
      </div>
    </div>
  );
};

export default HomeRecord;
